<template>
<!--  bg-gray-50-->
  <div class="pl-2 pr-2">
<!--    style="--van-steps-background:rgb(249 250 251)"-->
    <van-steps v-if="records.length>0" direction="vertical" :active="0">
      <van-step  v-for="(record, index) in records" :key="index" style="--van-step-active-color:#969799;--van-steps-background:rgb(249 250 251)">
        <template #active-icon>
          <!-- 自定义激活状态图标 -->
          <div v-if="record.dateGroup" class="rounded-full bg-gray-300 p-1">
            <van-icon name="stop" size="12" color="#ffffff"/>
          </div>
          <div v-else class="bg-blue-500 p-1 rounded-full">
            <van-icon :name="record.icon" size="16" color="#ffffff"/>
          </div>
        </template>
        <template #inactive-icon>
          <!-- 自定义未激活状态图标 -->
          <div v-if="record.dateGroup" class="rounded-full bg-gray-300 p-1">
            <van-icon name="stop" size="12" color="#ffffff"/>
          </div>
          <div v-else :class="record.iconBgColor" class="p-1 rounded-full">
            <van-icon :name="record.icon" size="16" color="#ffffff"/>
          </div>
        </template>

        <div v-if="record?.dateGroup !== undefined">
          <span> {{ record?.dateGroup }} </span>
        </div>
        <div v-else class="flex items-start">
          <div class="ml-2 flex-1">
            <div class="bg-white p-4 rounded-lg border border-solid border-[bg-gray-200]">
              <div  class="text-sm text-gray-700 mb-4">
                <div class="text-base font-semibold mb-3">
                  <span class="mr-1">{{record.title}}</span>
                  <van-tag v-if="record.status" class="p-0.5" type="warning" plain>{{ record.status }}</van-tag>
                </div>
                <div v-if="record?.remark" class="border border-solid border-[bg-gray-200] p-3 bg-gray-50">
                  {{ record?.remark }}
                </div>
                <div v-if="record.action_type === 'leads_sale_update'" class="flex items-center text-sm text-gray-500">
                  <img :src="record.saleHeadimgurl" alt="avatar" class="w-6 h-6 rounded-full mr-2" />
                  <span class="mr-2">{{ record?.saleName }}</span>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500">
                <img :src="record.saleHeadimgurl" alt="avatar" class="w-6 h-6 rounded-full mr-2" />
                <span class="mr-2">{{ record?.saleName }}</span>
                <span class="mr-2">{{ record.time }}</span>
                <span>{{ record.operate }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-step>
      <!-- 其他步骤 -->
    </van-steps>
    <div v-else class="no-more">
      <span>没有更多数据</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue";
import {LeadsRecordList, LeadsRecordListResult} from "@/api/leads.ts";

const props = defineProps<{
  leads_uuid: string,
  type: string,
  sale_uuid:string
}>();

onMounted(() => {
  leadsRecords(props.leads_uuid,props.type)
});

const records = ref<LeadsRecordListResult[]>([]);

const leadsRecords = async (uuid:string,type: string) => {
  try {
    const response = await LeadsRecordList(uuid,type);
    if (response.code === 0) {
      console.log(response.data)
      records.value = response.data
    }
  } catch (e) {
    console.log(e);
  }
};



</script>
<style scoped>
.van-step::after {
  display: none;
}
.no-more {
  text-align: center;
  color: #888;
  padding: 10px 0;
  font-size: 12px; /* 设置“没有更多了”字体大小 */
}
</style>